<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    
    <link href='http://fonts.googleapis.com/css?family=Galdeano' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css'>
    <link href='//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css' rel='stylesheet' type='text/css'>    

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js" data-semver="1.2.16" data-require="angular.js@*"></script>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

    <script src="live.js"></script>
    
    <style type="text/css">
    
      body {
        margin: 0;
      }
      
      .tag {
        width: 94mm;
        height: 59.4mm;        
        border: 1px dotted #eee;
        padding: 5mm;
        float: left;
        position: relative;
      }
      
      .isha-logo {
        background: url('IshaSingapore.png') no-repeat no-repeat;
        float: left;
        width: 50px;
        height: 42px;
        position: absolute;
        top: 18px;
        left: 18px;
        opacity: 0.75;
      }
      
      .ie-logo {
        background: url('InnerEngineering.png') no-repeat no-repeat;
        float: right;
        width: 185px;
        height: 42px;
        position: absolute;
        top: 18px;
        left: 150px;
        opacity: 0.75;
      }
      
      .date {
        font-family: 'Ubuntu Condensed';        
        width: 100%;
        height: 42px;
        text-align: right;

        position: absolute;
        top: 180px;
        left: 0px;
      }

      .content {
        text-align: center;
        font-family: 'Galdeano';
        margin-top: 50px;
        font-size: 1.0em;
        overflow: hidden;
      }

      #printArea {
        width: 210mm;
      }

      .btn {
        margin: 10px 0px;
      }
      
    </style>

    <style type="text/css" media="print">

      a.print-preview, #names, .btn, #date {
        display: none;
      }
    </style>
    <script>
      angular.module('app', []);
      
      function TagGenCtrl($scope) {
       
        $scope.names = "assjkabsd,sdsdfsdf";
        $scope.date = "May 3 & 4, 2014";

        $scope.genTags = function() {
          $scope.tags = parseNames($scope.names);
          $(".content").each(function() {
            for (var i = 0; i < 20; i++) {
              if(fitText(this)) break;
            }
          });

          $(".programDate").each(function() {
            this.innerText = $scope.programDate;
          });
        }
      
      function parseNames(_names) {
        return _names.replace(/\r/g , ",").replace(/\n/g , ",").replace(/,,/g , ",").split(",");
      }
      
      function fitText(c) {

        if(c.innerText == "") return true;
        
        var fontSize;
        if(c.style.fontSize == "") {
          c.style.fontSize = "1.0em";
          fontSize = 1.0;
        }
        else {
          fontSize = parseFloat(c.style.fontSize); 
        }        

        fontSize += 0.2;
        c.style.fontSize = fontSize + "em";

        if(c.scrollWidth > c.clientWidth) {
          fontSize -= 0.2;
          c.style.fontSize = fontSize + "em";
          return true;
        }

        return false;
      }
    }
     
    </script>
    
  </head>

  <body ng-app>
    <div ng-controller="TagGenCtrl">
      <textarea id="names" class="form-control" rows="20" ng-model="names" placeholder="Enter Names"></textarea><br>
      <form class="form-inline" role="form">
        <input type="text" class="form-control" id="date" ng-model="programDate" placeholder="Program Dates"></input>
        <button type="button" class="btn btn-primary" ng-click="genTags()">Generate Tags</button>
      </form>
      <div id="printArea">
        <div class="tag" ng-class="{}" ng-repeat="tag in tags">
          <div class="isha-logo"></div>
          <div class="ie-logo"></div>
          <div class="content" id="tag-{{$index}}">{{tag}}</div>
          <div class="programDate"></div>
        </div>
      </div>
    </div>
  </body>

</html>
